<style type="text/css">
	#app{
		margin: 0 30px;
	}
	.alert-danger-light{
		margin: 0 -15px;
		margin-bottom: 10px;
	}
	.n-default .msg-wrap {
		position: relative;
	}
	.n-default .n-left, 
	.n-default .n-right {
		margin-right: 0;
	}
	.n-right .msg-wrap{
		margin-left: 0;
	}
	
	.control-label{
		padding: 0;
		padding-bottom: 6px;
	}
	
	
	.imglist{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 300px;
		padding-bottom: 6px;
	}
	.imglist:after{
	    content: '';
	    width: calc((100% - 10px)/3);
	}
	
	
	.imglist>div{
		border-radius: 6px;
		overflow: hidden;
		width: calc((100% - 10px)/3);
		margin-bottom: 5px;
	}
	
	.imglist>div img{
		width: 100%;
		height: 96.6px;
	}
	
	
	.imglist .list{
		position: relative;
	}
	
	.imglist .list .wanl-close{
		display: none;
		top: 3px;
		right: 3px;
		width: 18px;
		height: 18px;
		line-height: 18px;
	}
	.imglist .list:hover .wanl-close{
		display: block;
	}
	
	.imglist .add{
		border: 1px dashed #18bc9c;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #18bc9c;
		height: 96.6px;
		line-height: 1;
	}
	
	.imglist .add span{
		font-size: 50px;
		font-weight: 100;
	}
	
	
	
	.imglist .goods{
		background-color: #f9f9f9;
		height: 45px;
		display: flex;
		align-items: center;
	}
	
	.imglist .goods img{
		height: 45px;
		width: 45px;
		margin-right: 10px;
	}
	
	.imglist .goods .info .title{
		width: 140px;
		color: #666666;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	.comments{
		width: 300px;
	}
	
	.comments .details{
		position: relative;
		border: 1px solid #18bc9c;
		padding: 15px;
		border-radius: 9px;
	}
	
	.wanl-close{
		position: absolute;
		right: -8px;
		top: -6px;
		text-align: center;
		width: 20px;
		height: 20px;
		line-height: 20px;
		color: #fff;
		background-color: rgba(44, 62, 80, 0.8);
		border-radius: 9999px;
	}
	
	.comments .details .text span{
		color: #999;
	}
	.comments .details .list{
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.comments .details .list:after{
	    content: '';
	    width: 32%;
	}
	
	.comments .details .list img{
		width: 32%;
		margin-bottom: 5px;
	}
	
	.comments .add{
		border: 1px dashed #18bc9c;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #18bc9c;
		line-height: 1;
		border-radius: 9px;
		overflow: hidden;
		height: 200px;
	}
	
	
	
	.live{
		height: 350px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.live img{
		width: 200px;
		margin-bottom: 20px;
	}
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
	<div id="app" v-cloak>
		<div class="alert alert-danger-light" v-if="type == 'live'"> 
			重要提示：打开App或小程序客户端扫码直播，直播页无法点击确认，请手动关闭窗口
		</div>
		<div class="form-group" v-show="isHead">
			<label class="control-label"><span class="text-red">*</span> 发布类型:</label>
			<select id="c-type" class="form-control" data-rule="required" v-model="type" name="row[type]">
				{foreach name="typeList" item="vo"}
					<option value="{$key}">{$vo}</option>
				{/foreach}
			</select>
		</div>
		<div class="form-group" v-if="type == 'live'">
			<div class="live">
				<div>
					<img src="/assets/addons/wanlshop/img/common/erweima.png" >
					<p>请打开商城的App或小程序扫码</p>
				</div>
			</div>
		</div>
		<div class="form-group hidden" v-if="type == 'live'">
			<input class="form-control" data-rule="required" />
		</div>
		<div class="form-group" v-if="type == 'show'">
		    <label class="control-label"><span class="text-red">*</span> 选择评论成为{{getTypeName(type)}}:</label>
			<div class="comments">
				<div class="details" v-if="commentsData">
					<div class="text">
						{{(commentsData.user).replace(/^(.).*(.)$/,'$1***$2')}}：<span>{{commentsData.content}}</span>
					</div>
					<div class="list">
						<img :src="cdnurl(item)" v-for="(item, index) in commentsData.images" :key="index">
					</div>
					<div class="wanl-close" @click="delComments">
						<span class="fa fa-times"></span>
					</div>
					<div class="hidden">
						<input type="text" name="row[comments_id]" :value="commentsData.id" />
						<input type="text" name="row[goods_ids]" :value="commentsData.goods_id" />
						<input type="text" name="row[content]" :value="(commentsData.user).replace(/^(.).*(.)$/,'$1***$2') +':'+ commentsData.content" />
						<input type="text" name="row[images][]" :value="item" v-for="(item, index) in commentsData.images" :key="index"/>
					</div>
				</div>
				<!-- 当存在 -->
				<div v-else>
					<div class="add" @click="addComments">
						<div class="text-center">
							<span>＋</span>
							<p>选择{{getTypeName(type)}}商品</p>
						</div>
					</div>
					<input type="hidden" name="row[images][]" data-rule="required"/>
				</div>
			</div>
		</div>
		<!-- 种草 -->
		<div class="form-group" v-if="type == 'want' || type == 'activity'">
		    <label class="control-label"><span class="text-red">*</span> {{getTypeName(type)}}图片:</label>
		    <div class="imglist">
		    	<div class="list" v-for="(item, index) in imgList" :key="index">
		    		<img :src="cdnurl(item)" >
					<div class="wanl-close" @click="delImg(index)">
						<span class="fa fa-times"></span>
					</div>
		    	</div>
				<div class="add" v-if="imgList.length < 9" @click="addImg">
					<div class="text-center">
						<span>＋</span>
						<p>选择{{getTypeName(type)}}图片</p>
					</div>
				</div>
		    </div>
			<div v-if="imgList.length == 0">
				<input type="hidden" name="row[images][]" data-rule="required"/>
			</div>
			<div class="hidden" v-else>
				<input type="text" name="row[images][]" :value="item" v-for="(item, index) in imgList" :key="index"/>
			</div>
			<div class="text-gray">
				上传3-9张真实图片，请勿上传与商品无关内容
			</div>
		</div>
		<!-- 上新 -->
		<div class="form-group" v-if="type == 'new'">
		    <label class="control-label"><span class="text-red">*</span> 添加 {{getTypeName(type)}}商品:</label>
		    <div class="imglist">
		    	<div class="list" v-for="(item, index) in goodsList" :key="index">
		    		<img :src="cdnurl(item.image)" >
					<div class="wanl-close" @click="delGoods(index)">
						<span class="fa fa-times"></span>
					</div>
		    	</div>
				<div class="add" @click="addGoods">
					<div class="text-center">
						<span>＋</span>
						<p>选择{{getTypeName(type)}}商品</p>
					</div>
				</div>
		    </div>
			<div v-if="goodsList.length == 0">
				<input type="hidden" name="row[goods_ids][]" data-rule="required"/>
			</div>
			<div class="hidden" v-else>
				<input type="text" name="row[goods_ids][]" :value="item.id" v-for="(item, index) in goodsList" :key="index"/>
				<input type="text" name="row[images][]" :value="item.image" v-for="(item, index) in goodsList" :key="index"/>
			</div>
		</div>
		
		<!-- 详情 -->
		<div class="form-group" v-if="type != 'show' && type != 'live'">
		    <label class="control-label"><span class="text-red">*</span> {{getTypeName(type)}}详情:</label>
		    <textarea id="c-content" data-rule="required" class="form-control editor" rows="4" name="row[content]" cols="50"></textarea>
		</div>
		
		
		
		<!-- 关联商品 -->
		<div class="form-group" v-if="type == 'want'">
		    <label class="control-label"><span class="text-red">*</span> 关联{{getTypeName(type)}}商品:</label>
			<div class="imglist" style="width: 600px;">
				<div class="goods list" v-for="(item, index) in goodsList" :key="index">
					<div> 
						<img :src="cdnurl(item.image)">
					</div>
					<div class="info">
						<div class="title">{{item.title}}</div>
						<div class="text-orange">
							￥{{item.price}}
						</div>
					</div>
					<div class="wanl-close" @click="delGoods(index)">
						<span class="fa fa-times"></span>
					</div>
				</div>
				<div class="add" style="height: auto; height: 45px;" @click="addGoods">
					+ 关联商品
				</div>
			</div>
			<div v-if="goodsList.length == 0">
				<input type="hidden" name="row[goods_ids][]" data-rule="required"/>
			</div>
			<div class="hidden" v-else>
				<input type="text" name="row[goods_ids][]" :value="item.id" v-for="(item, index) in goodsList" :key="index"/>
			</div>
		</div>
	</div>
	<div class="form-group layer-footer">
		<label class="control-label col-xs-12 col-sm-2"></label>
		<div class="col-xs-12 col-sm-8">
			<button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
			<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
		</div>
	</div>
</form>
